// Skill Hippo Main Sass File

/* 

###################################
 		Table Of Contents
###################################

1) Font Declaration.
2) Sass Variables, Functions, Mixins and etc.
3) Browser Resets.
*/


// 1) Font Declaration

@font-face {
    font-family: 'league_gothiccondensed_italic';
    src: url('../fonts/leaguegothic-condenseditalic-webfont.eot');
    src: url('../fonts/leaguegothic-condenseditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguegothic-condenseditalic-webfont.woff') format('woff'),
         url('../fonts/leaguegothic-condenseditalic-webfont.ttf') format('truetype'),
         url('../fonts/leaguegothic-condenseditalic-webfont.svg#league_gothiccondensed_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'league_gothicCnRg';
    src: url('../fonts/leaguegothic-condensedregular-webfont.eot');
    src: url('../fonts/leaguegothic-condensedregular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguegothic-condensedregular-webfont.woff') format('woff'),
         url('../fonts/leaguegothic-condensedregular-webfont.ttf') format('truetype'),
         url('../fonts/leaguegothic-condensedregular-webfont.svg#league_gothicCnRg') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'league_gothicitalic';
    src: url('../fonts/leaguegothic-italic-webfont.eot');
    src: url('../fonts/leaguegothic-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguegothic-italic-webfont.woff') format('woff'),
         url('../fonts/leaguegothic-italic-webfont.ttf') format('truetype'),
         url('../fonts/leaguegothic-italic-webfont.svg#league_gothicitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'league_gothicregular';
    src: url('../fonts/leaguegothic-regular-webfont.eot');
    src: url('../fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/leaguegothic-regular-webfont.woff') format('woff'),
         url('../fonts/leaguegothic-regular-webfont.ttf') format('truetype'),
         url('../fonts/leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rupee_foradianregular';
    src: url('../fonts/rupee_foradian-webfont.eot');
    src: url('../fonts/rupee_foradian-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/rupee_foradian-webfont.woff') format('woff'),
         url('../fonts/rupee_foradian-webfont.ttf') format('truetype'),
         url('../fonts/rupee_foradian-webfont.svg#rupee_foradianregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

// 2) Sass Variables, Functions, Mixins and etc.

	$lgci:'league_gothiccondensed_italic';
	$lgcr:'league_gothicCnRg';
	$lgi:'league_gothicitalic';
	$lgr:'league_gothicregular';
    $verdana:'verdana';
    $rupee:'rupee_foradianregular';

	// Colors Declaration
    $black:#000000;
    $yellow:#efc623; 
    $white:#ffffff;
    $light_grey:#e6e6e6;
    $dark_grey:#747474;

    // screen Sizes Declaration
    $mobile : 320px;
    $mobile-max : 480px;
    $tablet : 768px;
    $tablet-max: 980px;
    $desktop: 1200px;
    $desktop-large: 1280px;
    $desktop-small: 1024px;

    // Repeated Class Declaration
    
    #login-panel,#register-panel,#shopping-panel,#empty-panel{
        display: none;
    }
    #login-panel{
        display: none;
    }
    .back-to-top{
        background: url("../img/bottom.png") no-repeat;
        display:block;
        width:43px;
        height:46px;
        position: fixed;
        text-indent: -5000px;
        overflow: hidden;
        top:80%;
        right:0;
        display:none;
    }
    .top-nav-img{
        display: block;
        height: 35px;
        width:35px;
    }
    .gap{               //Gap Classes Includes to use on different pages
        height: 21px;
        width: 100%;
        float:left;
        clear:both;
    }
    .gap1{
        height:10px;
        width:100%;
        float:left;
        clear:both;
    }
    .gap2{
        height: 40px;
        width:100px;
        float:left;
        clear:both;
    }

    .rupee{
    &:before{
        content: "`";
        font-family: "rupee_foradianregular";
        margin-left: 7px;
        margin-right: 3px;  
        }
    }
.breadcrumb{
    background-color: $white;
    padding-left: 0px;
        padding-bottom: 20px;
        padding-top: 20px;
        margin-bottom: 0px;/**breadcrumb property change must be change****/
        @media (min-width: $mobile) and (max-width: $mobile-max){
        padding-top: 10px;
        padding-bottom: 10px;        
        }
    &>.active{
     color: $dark_grey;   
    }
    li{
      text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
      @media (min-width: $mobile) and (max-width: $mobile-max){
        font-size:9px;
                
        }
      a{
       color:$black;   
       font-size: 13px; 
       @media (min-width: $mobile) and (max-width: $mobile-max){
        font-size:9px;
                
        }
      }
      +li:before{
        color: $black;
      }    
    }   
}
.bread-special{
    margin-left:20px !important;
    @media (width:$mobile-max){
        margin-top:30px !important;
    }
    @media (width:$mobile){
        margin-top:60px !important;
    }
}
.book-control{                    
        border: 2px solid $black;
        border-radius: 0px;
        color: $black;
        padding-left: 10px;
        font-family: $verdana;
        font-size: 12px;
        resize: none;
    }
    // Mixins Declaration
    @mixin animate($property:all,$time:0.4s,$trans:ease){
        -webkit-transition: $property $time $trans;
        -moz-transition: $property $time $trans;
        -ms-transition: $property $time $trans;
        -o-transition: $property $time $trans;
        transition: $property $time $trans;
    }
    @mixin button($bgr:$yellow,$tcolor:$black,$hbgr:$yellow,$htcolor:$white){
        padding: 10px 8px;
        background-color: $bgr;
        margin-top:7px;
        border:none;
        border-radius: 0;
        color:$tcolor;
        &:hover{
            color:$htcolor;
            background-color: $hbgr;
        }
    }

.datepicker{
    border:3px solid $yellow !important;
}


/* 
3)  Browser Resets.
*/

body{
    padding: 0;
    margin:0;
    background:$white;
    color:$white;
    font-family: $verdana;
}
h1,h2,h3,h4,h5,h6{
    font-family: $lgr;
    margin: 0;
    line-height: 0.9em;
}
h1{
    font-size:90.8px;
}
h2{
    font-size:82.8px;
}
h3{
    font-size:41px;
}
h4{
    font-size:36px;
}
h5{
    font-size:24px;
}
h6{
    font-size:22px;
}
::selection{
    color:$white;
    background-color: $yellow;
}
::-moz-selection {
    color:$white;
    background:$yellow;
}
a{
    color:$white;
    text-decoration: none;
    font-family: $verdana;
    font-size: 11px;
    &:hover{
        color:$yellow;
        text-decoration: none;
    }
    //need to be changed in main sass
    &:focus{
        text-decoration: none;
        outline: none;
    }
}
.row{
    margin:0;
}
p{
    margin:0;
    font-family: $verdana;
}
hr{ /*must be change in main.scss*/
    color: $black;
    border-top: 2px solid #090808;
}

.container{
    max-width:1080px;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.activate{
    background-color:$yellow !important;
}


/*====fixed footer=====*/

  
.fixed-footer{
  width:260px;
  height:130px;
  background: white;
  position: fixed;
  z-index: 999;
  display: none;
  border-top: 2px solid black;
  border-right: 2px solid black;
  border-left: 2px solid black;
  bottom:-130px;
  right:70px;
  padding: 12px 12px;
  .subscribe-msg{
   padding-bottom: 10px;
   color: $black;
   font-family: $verdana;
   font-size: 12px;
   font-weight: bold;
   #alert-msg{
    display: none;
   }
  }

  #up-arrow {
    position: absolute;
    background: $black;
    padding-left: 12px;
    height: 23px;
    width: 95px;
    text-decoration: none;
    right: -2px;
    bottom: 130px;
    font-family: $lgr;
    font-size: 16px;
    text-transform: uppercase;
    cursor:pointer;

  }
  #up-arrow span{
  background: url(../img/up-arrow.png) no-repeat;
  height: 23px;
  width: 25px;
  float:right;
  }

#down-arrow {
    position: absolute;
    background: $black;
    height: 23px;
    width: 95px;
    text-decoration: none;
    padding-left: 12px;
    right: -2px;
    bottom: 130px;
    display:none;
    font-family: $lgr;
    font-size: 16px;
    cursor:pointer;
    text-transform: uppercase;
}
#down-arrow span{
  background: url(../img/down-arrow.png) no-repeat;
  height: 23px;
  width: 25px;
  float:right;
}
  .subscribe-btn{
     @include button($black,$white,$yellow,$black);
          border-radius: 0px;
          padding: 12px 67px;
          font-family: $verdana;
          font-weight: bold;
          font-size: 10px;
          margin-bottom: 10px;
          margin-top: -5px;
          text-transform: uppercase;
  }
  .book-control{
        &::-webkit-input-placeholder {
          font-size:10px;
          color: $dark_grey !important;
          font-family: $verdana;
             }

          &:-moz-placeholder { /* Firefox 18- */
            font-size:10px;
            color: $dark_grey !important;
            font-family: $verdana;
          }

          &::-moz-placeholder {  /* Firefox 19+ */
            font-size:10px;
            color: $dark_grey !important;
            font-family: $verdana;
          }

          &:-ms-input-placeholder {  
            font-size:10px;
            color: $dark_grey !important;
            font-family: $verdana;
            }
        }
  }



/*=======================================================
                    empty shopping cart css
=========================================================*/


#empty-panel{
    width:100%;
    float:left;
    .empty-wrap{
        margin-top: 120px !important;
    }
    .container{
        max-width:997px;
        margin: 0 auto;
        
    }
    hr{
        border-top: 2px solid $light_grey;
    }

    h2{
    color:$black;
    text-transform: uppercase;
    font-size: 40px;
    font-family: $lgr;
    
@media (min-width: $mobile) and (max-width: $mobile-max){
        /* Media Query Between Screen 320px and 480px  */
            font-size: 25px;    
        }
    }

    p{

    color:$black;
    text-transform: uppercase;
    font-size: 30px;
    font-family: $lgr;
    text-align: center;
    margin: 120px 0px;
    @media (min-width: $mobile) and (max-width: $mobile-max){
        /* Media Query Between Screen 320px and 480px  */
            font-size: 20px;    
        }

    }

      .empty-button{

        button{
        @include button();
        font-family: $verdana;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;

    }
    }
}
/*=============================================
                login scroll page
================================================*/

#login-panel{
    .login-wrap{
        margin:120px 0px 50px !important;
    }

    .container{
        padding: 0;
        max-width: 1007px;
        margin: 0 auto;
    }
    h4{

        font-family: $lgr;
        font-size: 40px;
        color:$black;
        text-transform: uppercase;
    }

    hr{
        border-top: 2px solid $light_grey;
        margin-left: 17px;
        margin-right: 27px;
    }


   .click-me{
   margin-top: 20px;
    width: 100%;
    float: left;
    min-height: 32px;
    margin-bottom: 20px;
    button{
     
        @include button($black,$white,$yellow,$black);
            
        padding:10px 25px;
        font-family: verdana;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        padding: 10px 14px;
        margin-right: 12px;
}

  }

.social-button{
    margin-top:160px;
} 
label{
    padding: 0;
}
}
/*=============================================
                signup scroll page
================================================*/

.registration-form{

    border-right: 2px solid $light_grey;
     width: 100%;
     float: left;
      @media (max-width: $tablet-max)
     {
      border: none;
     }
   form {
    
    border: 2px solid $black;
    padding: 25px 15px 21px 18px;
    float: left;
    min-height: 350px;
    max-width: 370px;
     
     .form-group{
            margin: 0px 0px 21px 0px;
            font-family: verdana;
            font-size: 12px;
            font-weight: bold;
            color: $black;
            text-transform: uppercase;
            text-align: left;
            span{
                color:#ff2948;
            }
     }
     .txtinput{
        border:2px solid $black;
        height: 38px;
        text-transform: none;
        border-radius: 0px;
      
    &:focus{
        box-shadow: none;
    }
        
    
     }

    label{
        padding: 0px;
        text-align: left;
    @media (min-width: $mobile) and (max-width: $tablet){
            
      padding-left: 15px;  
    }
    }

    .notice{
        font-size: 12px;
        color:$dark_grey;
        margin-bottom: 20px;
        font-family: verdana;
        span{
            color:#ff2948;
        }
    }

    }
}

.registration-form{
   .click{
   margin-top: 20px;
    width: 100%;
    float: left;
    min-height: 32px;
    .btn-yellow-style{
     
        @include button($black,$white,$yellow,$black);
            
        padding:10px 22px;
        font-family: verdana;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        margin-right: 12px;

}

 }

 }

/*============================================
            SHOPING CART WITH pop up
=================================================*/
#shopping-panel{
    color: $black;
    text-transform: uppercase;
    .shopping-wrap{
        margin-top:85px !important;
    }
    .container{
        max-width: 997px;
        margin: 0 auto;
        padding-right: 20px;
        padding-left: 10px;
    }


    h1  {

    margin:37px 0 18px 0;
    color:$black;
    text-transform: uppercase;
    font-size: 40px;
    font-family: $lgr;
    @media (min-width: $mobile) and (max-width: $tablet){
        font-size: 30px;
                
        }
    }
    

    table{
        text-align: center;
        th{
            
                font-size: 30px;
            font-family: $lgr;
                text-align: center;
            color: $black;
    text-transform: uppercase;
    font-weight: normal;    
    @media (min-width: $mobile) and (max-width: $tablet){
        font-size: 24px;
                
        }           
            
        }

        td{
            font-family: $lgr;
            font-size: 29px;
            color: $dark_grey;
            @media (min-width: $mobile) and (max-width: $tablet){
        font-size: 20px;
                
        }   

            .item-wrap{
                width: 80%;
                position: relative;
                
                h4{
                    font-size: 29px;
                    margin: 0;
                    text-align: left;
                    
                @media (min-width: $mobile) and (max-width: $tablet){
                    font-size: 20px;
                
                    }   
                }
                small{
                    font-size: 10px;
                    font-family: $verdana;
                    text-transform: none;
                    display: block;
                    text-align: left;
                }

                h6{
                    font-size: 10px;
                    font-family: $verdana;
                    font-weight: bold;
                    text-align: left;
                }

                .close-img{
                    background: url("../img/close-btn.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
                        height: 18px;
                        margin-left: 73px;
                        margin-top: -8px;
                        position: absolute;
                        width: 21px;
                }
            }
            .discount{
                    font-family: $lgr;
                    font-size: 15px;
                    display: block;
                }
        }
    }

    .total{
        border-top: 1px solid $light_grey;
        padding-top: 15px;
    h3{
        line-height: 50px;
    }
    .pad-rl{
        padding:0px;
    }
    h5{
        font-size: 30px;
        font-family: $lgr;
        // text-align: right;
        @media (min-width: $mobile) and (max-width: $tablet){
                    font-size: 20px;
                
        }

    }
      .total-charge{
        text-align: right;
      }
    h3{
        font-size: 23px;
        font-family: $lgr;
        color: $dark_grey;
    }
    input{
        margin-top: 10px;
    }
    button{
        @include button($yellow,$black,$black,$white);
        font-family: $verdana;
        font-size: 10px;
        font-weight: bold;
        padding: 10px 20px;
        text-transform: uppercase;
        margin-top:10px;
    }


}
}

.continue{
    margin-top: 30px;
    margin-bottom: 35px;
    text-align: right;
}
.simple-header{
    bottom: 8px !important;
    margin-right: -16px !important;
}







@import "home.scss";
@import "about.scss";
@import "team.scss";
@import "faq.scss";
@import "thankyou.scss";
@import "category.scss";
@import "order_summary.scss";
@import "teach.scss";
@import "copare_classes";

@import "trainer.scss";
@import "contact.scss";
@import "login.scss";
@import "registration.scss";
@import "recommend.scss";
@import "popup.scss";
@import "editprofile.scss";

@import "classes.scss";
@import "courses.scss";
@import "jquery_ui.scss"